<template>
  <div class="box">
    <img src="D:\Vue.Dr\ele.vue\ele-project\src\img\bg.jpg" alt="" />
    <el-card>
      <template #header>
        <h3>登录您的账号</h3>
      </template>
      <el-form ref="refForm" :model="emp" :rules="rules">
        <el-form-item prop="account">
          <el-input v-model="emp.account" placeholder="账号">
            <template #prefix>
              <el-icon><UserFilled /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            show-password
            v-model="emp.password"
            placeholder="密码"
            @keydown.enter="login"
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-space :size="30">
            <el-button @click="login" type="primary" style="width: 100%"
              >登录</el-button
            >
          </el-space>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { empLoginAPI } from "@/api/emp";
export default {
  data() {
    return {
      emp: {
        account: "",
        password: "",
      },
      rules: {
        account: { required: true, message: "账号不能为空", trigger: "blur" },
        password: { required: true, message: "密码不能为空", trigger: "blur" },
      },
    };
  },
  methods: {
    // 点击页面上登录按钮
    login() {
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          // 发送ajax
          empLoginAPI(this.emp).then((resp) => {
            // 登录成功之后
            if (resp.data) {
              // 需要将商家的信息存放到本地存储中
              localStorage.setItem("loginInfo", JSON.stringify(resp.data));
              // 跳转到首页
              this.$router.push("/home");
            } else {
              ElNotification({
                type: "error",
                message: "账号或密码错误",
              });
            }
          });
        }
      });
    },
    // 点击页面上重置按钮
    resetForm() {
      this.$refs.refForm.resetFields();
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffd100;
}
.el-card {
  width: 500px;
}
:deep(.el-space--horizontal) {
  width: 100%;
}
:deep(.el-space__item) {
  width: 100%;
}
.el-input {
  height: 40px;
}
.el-button {
  background-color: #ffd100;
  border: 1px solid #ffd100;
  height: 40px;
}
</style>
